<template>
  <div class="navbar">
    <el-menu
      :default-active="currentIndex"
      mode="horizontal"
      @select="handleSelect"
      background-color="#1b183f"
      text-color="#afafaf"
      active-text-color="#1acfff">
      <el-menu-item index="1">
        <a href="javascript:void(0)" class="home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页 Home</span>
        </a>
      </el-menu-item>
      <el-menu-item index="2">
        <a href="javascript:void(0)" class="learnmore">
          <i class="el-icon-document"></i>
          <span slot="title">更多 Learnmore</span>
        </a>
      </el-menu-item>
      <el-menu-item index="3">
        <a href="javascript:void(0)" class="online">
          <i class="el-icon-edit"></i>
          <span slot="title">在线 Online</span>
        </a>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  methods: {
    handleSelect(key) {
      if (key == '1') {
        this.$router.push('/')
      } else if (key == '2') {
        this.$router.push('/learnmore')
      } else if (key == '3') {
        this.$router.push('/online/uploads')
      }
    }
  },
  computed: {
    currentIndex() {
      if (this.$route.path == '/online') {
        this.$router.push('/online/uploads')
      }
      if (this.$route.path == '/') {
        return '1'
      } else if (this.$route.path == '/learnmore') {
        return '2'
      } else if (this.$route.path == '/online/uploads' || this.$route.path == '/online/result') {
        return '3'
      }
    }
  }
}
</script>

<style lang="scss">

</style>
